<template>
	<view class="wrap">
		<view class="eat_body" v-if="isArray(medalList)">
			<view class="eat_box" v-for="(item,index) in medalList" :key="index">
				<view class="eat_head">
					<view class="head_box">
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17341614085901471.png" mode="aspectFill"></image>
						<view class="head_tit">
							{{item.MedalType || '勋章'}}
						</view>
					</view>
					
				</view>
				<view class="eat_main" v-if="isArray(item.Item)">
					<view class="eat_cell" v-for="(el,i) in item.Item" :key="i">
						<view class="icon">
							<image :src="el.IsTake ? el.ICON_Sel : el.ICON" mode="aspectFill"></image>
						</view>
						<view class="eat_name" :style="{color: el.IsTake==1 ? '#641E0C' : '#999999'}">
							{{el.MedalName}}
						</view>
					</view>
				</view>
				<view class="eat_main" v-else>
					<EmptyBox style="margin: 0 auto;"></EmptyBox>
				</view>
				
			</view>
			<view style="height: 40rpx;"></view>
			<!-- <view class="eat_box">
				<view class="eat_main">
					<EmptyBox style="margin: 0 auto;"></EmptyBox>
				</view>
			</view> -->
		</view>
		<EmptyBox v-else style="margin: 0 auto;"></EmptyBox>
		<BtmLogo></BtmLogo>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				medalList:[],
				notList:[
					{
						name:'初级吃货',
						icon:'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1734164930642104.png'
					},
					{
						name:'资深吃货',
						icon:'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1734164941517538.png'
					},
					{
						name:'高级吃货',
						icon:'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/173416495183273.png'
					}
				]
			
			};
		},
		onLoad() {
			this.UserMedalList()
			
			console.log('=》》》》》》》》',this.isArray([]));
		},
		methods:{
			async UserMedalList(){
				let res = await this.$api.post('/Medal/UserMedalList')
				this.medalList = res.data || []
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff5e9;
}
.wrap{
	padding: 24rpx;
	.eat_body{
		
		.eat_box{
			margin-top: 40rpx;
			background: rgba(255,255,255,0.7);
			border-radius: 24rpx;
			padding: 48rpx 0rpx;
			position: relative;
			&:nth-child(n+2){
				margin-top: 80rpx;
			}
			.eat_head{
				position: absolute;
				top: -34rpx;
				left: 50%;
				transform: translate(-50%,0);
				.head_box{
					width: 336rpx;
					height: 72rpx;
					position: relative;
					
					image{
						width: 100%;
						height: 100%;
					}
					.head_tit{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						font-weight: bold;
						font-size: 32rpx;
						color: #7F5E32;
					}
				}
			}
			.eat_main{
				margin-top: 48rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				.eat_cell{
					width: 33.33%;
					&:nth-child(n+4){
						margin-top: 32rpx;
					}
					.icon{
						margin: 0 auto;
						width: 180rpx;
						height: 180rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.eat_name{
						margin-top: 16rpx;
						text-align: center;
						font-size: 28rpx;
						color: #641E0C;
					}
				}
			}
		}
	}
}
</style>
